<script setup lang="ts">
import { computed } from 'vue'
import type { ColorItem } from '@/shared/colorList'

type Props = {
  text?: string
  angle?: number
  colorList?: ColorItem[]
}

const props = withDefaults(defineProps<Props>(), {
  text: 'Easy',
  angle: 135,
  colorList: () => []
})


const gradientValue = computed(() => {
  return `${props.angle}deg,${props.colorList.map(item => item.value).join(',')}`
})

</script>

<template>
  <div class="text-view-container">
    <h1 class="text-view">{{ text }}</h1>
  </div>
</template>


<style lang="less">
.text-view-container {
  background-color: #fff;
  width: 440px;
  border-radius: 12px;
  padding: 20px 0;
  text-align: center;

  .text-view {
    font-size: 22px;
    -webkit-text-fill-color: transparent !important;
    -webkit-background-clip: text !important;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    background: linear-gradient(v-bind(gradientValue))
  }

  box-shadow: 0 8px 15px -3px rgb(0 0 0 / 20%);
}
</style>